<script setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import MaterialButton from "@/components/MaterialButton.vue";
import goodZoom from "./goodZoom.vue";
import vueMkHeader from "@/assets/img/products/badlands/bg.png";
import bottom from "@/assets/img/products/badlands/bottom.png";
import tire from "@/assets/img/products/badlands/tire.png";
import icon1 from "@/assets/img/products/badlands/icon11.png";
import icon2 from "@/assets/img/products/badlands/icon22.png";
import icon3 from "@/assets/img/products/badlands/icon33.png";
import icon4 from "@/assets/img/products/badlands/icon4.png";
import icon5 from "@/assets/img/products/badlands/icon5.png";
import icon6 from "@/assets/img/products/badlands/icon6.png";

import tire1 from "@/assets/img/products/badlands/tire1.png";
const emit = defineEmits(["scrollIntoView"]);
const scrollIntoView = () => {
    //子组件用emit向父组件触发一个事件
    emit("scrollIntoView");
};
const router = useRouter();
const props = defineProps({
    productPic: {
        type: String,
        // default: true,
    },
    name: {
        type: String,
    },
    detail: {
        type: String,
    },
    iconLeft: {
        type: String,
    },
    iconRight: {
        type: String,
    },
});
let detailArr = ref([]);

watch(
    () => props.detail,
    (newRouterName) => {
        if (newRouterName) {
            if (typeof newRouterName == "string" && newRouterName.indexOf("==") > -1) {
                detailArr.value = newRouterName.split("==");
            } else {
                detailArr.value = [newRouterName];
            }
        }
    },
    { deep: true, immediate: true }
);
</script>
<template>
    <div style="background: #f5f5f5" loading="lazy">
        <div class="container pt-6">
            <div class="row justify-content-center">
                <div class="col-lg-5 mt-2">
                    <div class="card" style="height: 100%">
                        <div class="card-body text-center">
                            <goodZoom :productPic="productPic" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 mt-2">
                    <div class="card" style="height: 100%">
                        <div class="card-body">
                            <h3 class="text-black text-f-ERASBD ignore">{{ name }}</h3>
                            <div style="width: 100%; height: 4px; background: #ed1c24; border-radius: 0px 0px 0px 0px"></div>
                            <div class="d-flex" style="flex-direction: column">
                                <div class="text-item" v-for="(item, index) in detailArr" :key="index">
                                    <div class="dot"></div>
                                    <div>
                                        <span class="content text-f-Montserrat-Medium">{{ item }} </span>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-end justify-content-between my-5" style="flex-wrap: wrap">
                                <img class="mx-1 my-1 img-fluid" :src="iconLeft" alt="" />
                            </div>
                        </div>
                        <div class="text-center bottom show-pointer" style="background: rgba(237, 28, 36, 1); border-radius: 0 0 1rem 1rem" @click="scrollIntoView">
                            <h6 class="text-white pt-2 text-f-ERASBD">SPEC DATA</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.dot {
    width: 0.8rem;
    height: 0.8rem;
    background: #ed1c24;
    border-radius: 0.4rem;
    margin-right: 1rem;
    flex-shrink: 0;
    margin-top: 0.4rem;
}
.text-item {
    display: flex;
    margin: 0.5rem 0;
    text-align: left;
}
.content {
    /* width: calc(100% - 3rem); */
    font-size: 0.9rem;
    color: #000;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .content {
        font-size: 1.5rem;
    }
}
@media (max-width: 768px) {
    .content {
        font-size: 1.2rem;
    }
}
</style>
